<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <%include("/common/header.html",{title:''}){}%>
    <title>绿地明细</title>
    <style>
        table, th, td {
            height: 32px;
            width: 258px;
            border: 1px solid #abbac3;
        }

        table tr:hover {
            background-color: #dafdf3;
        }

        table tr:nth-child(even) {

            background: #dafdf3;

        }

        .mode {
            background-color: #dcdcdc26;
            height: 100px;
            padding: 10px;
            font-size: 20px;
            border: 1px solid darkgray;
            margin: 10px;
        }

        .control {
            background-color: #dcdcdc26;
            height: 968px;
            padding: 10px;
            font-size: 20px;
            border: 1px solid darkgray;
            margin: 0px 10px;
        }

        .name {
            margin-bottom: 0px;
            border-radius: 30px 30px 0px 0px;
            background-color: #009688;
            font-size: 1.5rem;
            color: white;
            text-align: center;
            padding: 10px;
            height: 35px;
        }

        .conten1 {
            background-color: white;
            color: black;
            height: 216px;
            border: 1px solid black;
        }

        .hufbor {
            position: absolute;
            background-color: red;
            width: 25px;
            height: 25px;
            border-radius: 0px 0px 25px 0px;
        }

        .btn {
            margin-left: 53px;
            margin-top: 10px;
            background-color: #009688;
            color: white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            outline: none;
            border: none;
        }

        .num {
            font-size: 35px;
            color: orange;
            position: absolute;
            top: 77px;
        }

        .rad {
            margin-left: 60px;
            width: 27%;
        }

        .choose {
            margin-left: 10px;
        }

        .fon {
            margin-left: 20px;
        }

        .tabll {
            text-align: center;
            margin-left: 18px;
            margin-top: 10px;
        }

        .times {
            text-align: center;
            vertical-align: middle;
        }

        .num1 {
            width: 30px;
        }

        .num2 {
            width: 50px;
        }

        .bg {
            margin: 20px auto auto 15px;
        }
    </style>
</head>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=IENn7ABARjQIkTeAKyh80VTkg2jYXf3K"></script>
<body>


<div class="x-nav bg">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">首页</a><span lay-separator="">/</span>
        <a href="javascript:">智能喷灌</a><span lay-separator="">/</span>
        <a><cite>喷灌管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-3"></i>
    </a>
</div>
<div class="x-body" style="height: 1000px;">
    <div class="mode">
        模式选择
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6 layui-col-md4 rad">
                    <input type="radio" checked name="1" class="layui-icon-radio">
                    <span class="choose">远程手动</span>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <input type="radio" name="1" class="layui-icon-radio">
                    <span class="choose">时间段控制</span>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <input type="radio" name="1" class="layui-icon-radio">
                    <span class="choose">关联量控制</span>
                </div>
            </div>
        </div>
    </div>
    <div class="control">
        控制平台
        <div class="layui-fluid" id="content">
            <div class="layui-row layui-col-space15">
                <div v-for="(contents,index) in contentlist" class="layui-col-sm6 layui-col-md3" >
                    <div class="layui-card name">
                        {{contents.controlName}}
                    </div>
                    <div class="conten1">
                        <div class="hufbor"></div>
                        <input type="button" onclick="change(this)" value="开" class="btn">
                        <span class="fon">阈值:</span>
                        <span class="num">{{contents.threshold}}</span>
                        <table class="tabll">
                            <tr>
                                <th class="num2"></th>
                                <th class="times">启动时间</th>
                                <th class="times">停止时间</th>
                            </tr>
                            <tr>
                                <td class="num1">1</td>
                                <td>{{contents.timestart}}</td>
                                <td>{{contents.timeend}}</td>
                            </tr>
                            <tr>
                                <td class="num1">2</td>
                                <td>{{contents.onetimestart}}</td>
                                <td>{{contents.onetimeend}}</td>
                            </tr>
                            <tr>
                                <td class="num1">3</td>
                                <td>{{contents.totimestart}}</td>
                                <td>{{contents.totimeend}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%include("/common/foot.html"){}%>
<script>
    var app = new Vue({
        el: '#content',
        data: {
            contentlist: []
        },
        created: function () {
            $.ajax({
                type: "post",
                //async : false, //同步执行
                url: "system/control/findAlls.json",
                data: {

                },
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    for (var i = 0; i < result.data.length; i++) {
                        app.contentlist.push(result.data[i])
                    }
                }
            });
        },
        methods: {

        }
    });
    function change(btn) {
        if ($(btn).val() == '开') {
            btn.style.background = "#FF0000";
            btn.value = "关";
        } else {
            btn.style.background = "#009688";
            btn.value = "开";
        }
    };
</script>
</body>

</html>
